import React, { useState, useEffect } from "react";

export default (): JSX.Element => {
  const init = () => {
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1];
    // 结尾推出（删除）
    console.log(arr.pop(), arr); // 返回被推出的那一项
    // 结尾添加
    console.log(arr.push(9), arr); // 返回新数组的长度
    // 首个元素弹出（删除）
    console.log(arr.shift(), arr); // 返回被推出的那一项
    // 开头添加元素
    console.log(arr.unshift(9), arr); // 返回新数组的长度
    // splice(开始位置,删除几个,添加1,添加2)
    console.log(arr.splice(2, 3, 5, 6), arr); // 返回被删除的
    // 排序
    console.log(
      arr.sort((a, b) => b - a),
      arr
    ); // 返回排序结果
    console.log(arr.reverse(), arr); // 返回排序结果
    // 填充
    let arr1: number[] = [];
    arr1.length = 10;
    arr1.fill(10, 0, 3);

    // --------------------是否改变原数组分界线--------------------

    // 裁切slice(开始位置,结束位置)
    console.log(arr.slice(1, 3), arr); // 返回被裁切的数组
    // length
    console.log(arr.length); // 数组长度
    // 合并
    console.log(arr.concat([1, 2, 3, 4]), arr); // 返回新数组
    // 转化成字符串
    console.log(arr.toString(), arr); // 通过“,”分割开
    console.log(arr.join("*"), arr); // 通过“,”分割开
    // 迭代
    arr.forEach((item, index, arr) => {}); // 没有返回值遍历数组，不需要return
    console.log(
      arr.map((item, index, arr) => {
        return item;
      })
    ); // 返回新数组，需要return
    console.log(arr.filter((item) => item === 1)); // 返回过滤后的数组，不改变原数组，返回boolean
    console.log(
      arr.reduce((total: any, item: any) => total + item.toString()),
      ""
    ); // 返回计算后的结果
    console.log(
      arr.reduceRight((total: any, item: any) => total + item.toString()),
      ""
    ); // 返回计算后的结果
    console.log(
      arr.every((item, index, arr) => {
        return item > 5;
      })
    ); // 检查所有项是否都通过，返回boolean
    console.log(
      arr.some((item, index, arr) => {
        return item > 5;
      })
    ); // 检查是否有通过的项，返回boolean
    console.log(arr.indexOf(1)); // 返回匹配到的第一项的索引位置，配有匹配到返回-1
    console.log(arr.lastIndexOf(1)); // 返回匹配到的最后一项的索引位置，配有匹配到返回-1
    console.log(arr.includes(1)); // 是否存在，返回boolean
    console.log(
      arr.find((item, index, arr) => {
        return item > 5;
      })
    ); // 返回查找匹配到的第一项
    console.log(
      arr.findIndex((item, index, arr) => {
        return item > 5;
      })
    ); // 返回查找匹配到的第一项的索引值
  };
  useEffect(() => {
    init();
  }, []);
  return <div>数组</div>;
};
